<template>
	<view class="content">
		<view class="edgeInsetTop"></view>
		<wanl-image-cutter @ok="getCropperImage" @cancel="oncancle" :url="url" :fixed="false" :blob="false"
			:maxWidth="500" :maxHeight="500" />
		<!-- #ifndef MP-WEIXIN -->
		<view class="text-center padding-top-xl" :style="{backgroundImage: `url(${$wanlshop.maks()})`}">
			<view @tap="chooseImage" class="cu-avatar avatar" v-if="path"
				:style="{ backgroundImage: 'url(' + path + ')' }"></view>
			<view @tap="chooseImage" class="cu-avatar avatar" v-else
				:style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar) + ')' }"></view>
			<view class=" text-sm" @tap="chooseImage">点击修改头像 </view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
			<image class="avatar" :src="($wanlshop.oss(user.avatar))"></image>
			<view class=" text-sm" @tap="chooseImage">点击修改头像 </view>
		</button>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				url: '',
				path: '',
				avatar: '',

			};
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			// 小程序切换头像
			onChooseAvatar(e) {
				console.log(e);
				// e.detail.avatarUrl
				this.getCropperImage({
					path: e.detail.avatarUrl
				})

			},

			chooseImage() {
				let that = this;
				// #ifdef H5
				that.changeAuth()
				// #endif

				//#ifdef APP-PLUS
				uni.getSystemInfo({
					success: function(res) {
						console.log(res.osName)
						if (res.osName == "android") {
							let _permissionID = 'android.permission.WRITE_EXTERNAL_STORAGE';
							plus.android.checkPermission(_permissionID,
								granted => {
									console.log("granted的值是:", granted.checkResult);
									if (granted.checkResult == "-1") {
										uni.showModal({
											title: '好饰商家版对存储空间/照片/相机/摄像头权限申请说明',
											content: '便于您使用该功能上传您的照片/图片/视频及用于更换头像。',
											showCancel: false, // 不显示取消按钮
											success(res) {
												console.log(res, '---->')
												that.changeAuth()
											}
										})
									} else {
										that.changeAuth()
									}
								},
								error => {
									console.log("权限报错:", error.message);
								}
							);
						} else if (res.osName == "ios") {
							that.changeAuth()
						}
					}
				});
				// #endif
			},

			changeAuth() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						this.url = res.tempFilePaths[0];
					}
				});
			},
			getCropperImage(e) {
				this.path = e.path;
				this.url = '';
				// 上传图片
				this.$api.get({
					url: '/wanlshop/common/uploadData',
					success: updata => {
						this.$api.upload({
							url: updata.uploadurl,
							filePath: e.path,
							name: 'file',
							formData: updata.storage == 'local' ? null : updata.multipart,
							success: res => {
								this.$api.post({
									url: '/wanlshop/user/profile',
									data: {
										avatar: res.url
									},
									success: data => {
										this.$store.commit('user/setUserInfo', {
											avatar: data.avatar
										});
									}
								});
							}
						});
					}
				});
			},
			oncancle() {
				this.url = '';
			}
		}
	};
</script>
<style>
	::v-deep.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		width: 5rem;
		height: 5rem;
		background-color: #e5e5e5;
		border-radius: 50%;
		margin: 30rpx;
	}
</style>